<template>
  <div>
    <div class="mlt">
      <el-button
        v-permissions="{ permission: ['add:Scheduling'] }"
        type="primary"
        @click="addScheduling"
      >
        新增排班
      </el-button>
    </div>
    <div style="display: flex">
      <div class="mlt">
        <el-button type="primary" @click="lastWeek">上周</el-button>

        <el-button type="primary" @click="ThisWeek">本周</el-button>
        <el-button type="primary" @click="nextWeek">下周</el-button>
      </div>
      <div class="mlt" style="margin-left: 40px">
        <el-date-picker
          v-model="value1"
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          style="width: 445px"
          type="daterange"
          value-format="timestamp"
          @change="pickerChange"
        />
      </div>
    </div>

    <div class="table_wrap">
      <table>
        <thead>
          <tr>
            <th
              v-for="(item, key) in tableList"
              :key="key"
              colspan="1"
              style="width: 100px"
            >
              {{ key }}
              <br />
              {{ item.week }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td
              v-for="(item, key) in tableList"
              :key="key"
              colspan="1"
              style="vertical-align: top; width: 200px"
            >
              <div
                v-for="(items, index) in item.list"
                :key="index"
                :class="items.res_status"
                style="cursor: pointer; border-radius: 25px"
              >
                <!-- @click="details(items)" -->

                <div @click="details(items)">
                  <div
                    style="
                      margin-top: 10px;
                      background: rgb(46, 189, 173);
                      border-radius: 13px;
                      color: #fff;
                      padding: 1px;
                      min-height: 125px;
                    "
                  >
                    <div
                      v-for="(iteme, indexs) in items.scheduling_time"
                      :key="indexs"
                    >
                      <p class="el-icon-date">&ensp; &ensp;{{ iteme }}</p>
                    </div>
                    <p class="el-icon-user">
                      {{ items.username }}
                    </p>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- ----------------- -->
    <!-- 添加 -->
    <el-dialog
      :before-close="handleClose"
      title="排班"
      :visible.sync="schedulingShow"
      width="60%"
    >
      <!-- <span>这是一段信息</span> -->
      <div>
        <p>选择{{ langs.page.user }}</p>
        <el-select
          v-model="positionListValue"
          :disabled="selectShow"
          :placeholder="'请选择' + langs.page.user"
          @change="positionListChange"
        >
          <el-option
            v-for="item in positionList"
            :key="item.id"
            :label="item.real_name"
            :value="item.id"
          />
        </el-select>
        <p>排班间隔 (分钟)</p>
        <el-select
          v-model="value"
          allow-create
          default-first-option
          :disabled="selectShow"
          filterable
          placeholder="请选择排班间隔 (分钟)"
          @change="intervalChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          />
        </el-select>
        <p>休息时间 (分钟)</p>
        <el-input
          v-model="form.rest_time"
          placeholder="请选择休息时间 (分钟)"
          style="width: 210px"
        />
        <div style="display: flex; margin-top: 10px">
          <p>类型</p>
          <p style="margin-left: 10px">
            <el-radio-group v-model="radio" @change="radioChange">
              <el-radio :label="'day'">日排班</el-radio>
              <el-radio :label="'week'">周排班</el-radio>
            </el-radio-group>
          </p>
        </div>
        <div v-if="radioIf == 0 || radioIf == 3">
          <DailyScheduling
            :end-time-picker="endTimePicker"
            :form="form"
            :itemdataeday="itemdataeday"
            :start-time-picker="startTimePicker"
            @send="schedulingShow = false"
            @showMain="showMain"
          />
        </div>
        <div v-if="radioIf == 1 || radioIf == 2">
          <WeekScheduling
            :end-time-picker="endTimePicker"
            :form="form"
            :itemdatae="itemdatae"
            :pickerlist="pickerlist"
            :start-time-picker="startTimePicker"
            @send="schedulingShow = false"
            @showMain="showMain"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getSchedulingList, schedulingDetail } from '@/api/scheduling'
  import DailyScheduling from './components/dailyScheduling.vue'
  import WeekScheduling from './components/weekScheduling.vue'

  import { groupList } from '@/api/position'

  export default {
    components: {
      DailyScheduling,
      WeekScheduling,
    },
    data() {
      return {
        selectShow: false,
        tableList: {},
        radioIf: '',
        value1: '',
        radio: 'day',
        schedulingShow: false,
        startTime: '',
        endTime: '',
        weekindex: 0,
        form: {},
        endTimePicker: {
          start: '08:00',
          step: '00:20',
          end: '23:59',
          minTime: this.startTime,
        },
        startTimePicker: {
          start: '08:00',
          step: '00:20',
          end: '23:59',
        },
        itemdatae: [],
        itemdataeday: [],
        options: [
          {
            value: '20',
            label: '20',
          },
          {
            value: '30',
            label: '30',
          },
          {
            value: '40',
            label: '40',
          },
          {
            value: '50',
            label: '50',
          },
          {
            value: '60',
            label: '60',
          },
        ],
        value: '',
        positionListValue: '',
        positionList: [],
        user_id: '',
        pickerlist: {},
        langs: JSON.parse(window.localStorage.getItem('lang')),
      }
    },
    watch: {},
    mounted() {
      this.endTimePicker.start =
        window.localStorage.getItem('morning_start_time')
      this.endTimePicker.end = window.localStorage.getItem('afternoon_end_time')
      this.startTimePicker.start =
        window.localStorage.getItem('morning_start_time')
      this.startTimePicker.end =
        window.localStorage.getItem('afternoon_end_time')

      //
      this.pickerlist.afternoon_end_time =
        window.localStorage.getItem('afternoon_end_time')
      this.pickerlist.morning_start_time =
        window.localStorage.getItem('morning_start_time')
      this.pickerlist.afternoon_start_time = window.localStorage.getItem(
        'afternoon_start_time'
      )
      this.pickerlist.morning_end_time =
        window.localStorage.getItem('morning_end_time')

      // window.localStorage.setItem('morning_end_time', e.morning_end_time)
      this.wakOptions = eval(window.localStorage.getItem('work_week'))
      this.init()
    },
    methods: {
      // 初始化
      init() {
        this.scheduling()
        this.position()
      },
      // 选择日期
      timeDataChange(e) {
        this.form.scheduling_date = e
        var Setime = this.timeData //给所选择的日期一个变量名
        var ji = new Date(Setime).getDay() //将日期转换成周
        var date = new Date(Setime) //指定在对象中存储的日期
        var timeList = []
        for (var i = 1 - ji; i < 8 - ji; i++) {
          //根据选定的星期进行循环一周
          var q = new Date() //获取当前日期
          let tt = q.setTime(date.getTime() + 3600 * 1000 * 24 * i) //将当前日期设置成指定日期的前i天的毫秒日期
          let td = new Date(tt) //将获取到的毫秒日期指定到对象中存储
          let time =
            td.getFullYear() + '-' + (td.getMonth() + 1) + '-' + td.getDate() //将毫秒日期转为年月日格式
          timeList.push(time) //将根据选择的日期循环出来一周的日期放进数组里面
        }

        const timeData = []
        for (var j = 0; j < 7; j++) {
          timeData.push({
            timez: timeList[j],
            label: j + 1,
          })
        }
      },
      addScheduling() {
        this.itemdataeday = []
        this.itemdatae = []
        this.value = ''
        this.positionListValue = ''
        this.radioIf = 0
        this.radio = 'day'
        this.itemData = []
        this.form = {}
        this.schedulingShow = true
        this.selectShow = false
      },
      // 获取排班列表
      scheduling() {
        const params = {
          weekindex: this.weekindex,
        }
        getSchedulingList(params).then((e) => {
          this.tableList = e.data
        })
      },
      // 获取岗位
      position() {
        groupList().then((res) => {
          this.positionList = res.data
        })
      },
      //获取间隔时间
      intervalChange(min) {
        if (min == 0) {
          this.value = ''
          this.$message.error('间隔时间不可小于或等于0（分钟）')
          return
        }
        this.form.interval_time = min
        // 分钟数换算
        let minTime = ''
        let h = Math.floor(min / 60)
        min -= h * 60
        if (min == 0) {
          minTime = h ? '0' + h + ':00' : ''
        } else {
          if (min < 10) {
            min = '0' + min
          }
          if (h < 10) {
            h = '0' + h
          }
          minTime = (h ? h + ':' : '00:') + (min ? min + '' : '')
        }
        this.startTimePicker.step = minTime
        this.endTimePicker.step = minTime
        return minTime
      },
      showMain() {
        this.schedulingShow = false
        this.init()
      },
      // 获取岗位
      positionListChange(e) {
        this.form.user_id = e
      },
      lastWeek() {
        this.weekindex--
        this.scheduling()
      },
      ThisWeek() {
        this.weekindex = 0
        this.scheduling()
      },
      nextWeek() {
        this.weekindex++
        this.scheduling()
      },
      // 修改按钮
      details(e) {
        this.itemdatae = []
        this.itemdataeday = []
        if (e.type == 'week') {
          this.radioIf = 2
          this.radio = 'week'
          const params = {
            id: e.id,
            type: e.type,
          }
          schedulingDetail(params).then((j) => {
            // this.itemData = j.data.week
            this.itemdatae = j.data.week
            this.schedulingShow = true
            this.selectShow = true
          })
        } else {
          this.radio = 'day'
          this.radioIf = 3
          const params = {
            id: e.id,
            type: e.type,
          }
          schedulingDetail(params).then((j) => {
            // this.itemData = j.data.week
            // this.itemdatae = j.data.week
            this.itemdataeday.push(j.data.day)
            this.schedulingShow = true
            this.selectShow = true
            // this.selectShow = true
          })
        }
        this.positionListValue = e.username
        this.value = e.interval_time
        this.form.id = e.id
        this.form.user_id = e.user_id
        this.form.interval_time = e.interval_time
      },

      // 单选框 事件
      radioChange(e) {
        this.form.type = e
        if (e == 'day') {
          this.radioIf = 0
        } else {
          this.radioIf = 1
        }
      },

      pickerChange(e) {
        if (e) {
          // 七天时间戳
          const s = e[0] + 518400000
          if (e[1] > s) {
            this.value1 = ''
            this.$message.error('请选择七天内的日期')
          } else {
            const params = {
              start_date: e[0],
              end_date: e[1],
            }
            getSchedulingList(params).then((e) => {
              this.tableList = e.data
            })
          }
        }
      },

      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()

            this.schedulingShow = false
          })
          .catch(() => {})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .table_wrap {
    width: 99%;

    height: 65vh;
    overflow: auto;
    margin: 20px 0 20px 10px;
    // border-bottom: 1px solid #61dafb;
  }
  table {
    table-layout: fixed;

    width: 99%;

    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ededed;
  }

  td,
  th {
    text-align: center;
    width: 150px;
    box-sizing: border-box;
    // border-right: 1px solid red;
    border-right: 1px solid #e4e4e4;

    border-bottom: 1px solid #e4e4e4;
    /*超出长度...*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  thead tr th {
    position: sticky;
    top: 0;
    // background:#61dafb;
    background: #fff;
  }

  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    // background: #61dafb;
    text-align: center;
  }
  th:first-child {
    z-index: 1; /*左上角单元格z-index，切记要设置，不然表格纵向横向滚动时会被该单元格右方或者下方的单元格遮挡*/
    // background: pink;
  }
</style>
